//聚水潭编辑名称弹窗
import React, { useState } from 'react';
import CommonModal from '@/components/CommonModal';
import CommonLoading from '@/components/CommonLoading';
import { Input, Form, message } from 'antd';
import { layout1 } from '@/utils/config';
import { saveOfflineStore } from '@/services/common';
import { useNavigate } from 'react-router-dom';

const AddTmallSupply = ({ visible, handleVisible, handleOk }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
	const navigate = useNavigate();
  const handleSubmit = async () => {
    setLoading(true);
    const { storeName } = form.getFieldsValue();
    const res = await saveOfflineStore({
      storeName,
      type: 21,
    });
    setLoading(false);
    if (res.success) {
      message.success('添加成功！');
      navigate(0);
    }
  };

  const onOk = () => {
    form.validateFields().then((val) => {
      handleSubmit();
    });
  };

  return (
    <CommonModal
      title="编辑名称"
      visible={visible}
      onCancel={() => handleVisible(false)}
      onOk={onOk}
      minHeight="150px"
      width="600px"
    >
      <Form {...layout1} form={form} name="add-tmall-supply-store">
        <Form.Item
          name="storeName"
          label="天猫供销名称"
          rules={[
            { required: true, message: '店铺名不能为空' },
            { max: 15, message: '不能超过15个字符' },
          ]}
        >
          <Input placeholder="请输入名称" />
        </Form.Item>
      </Form>
      <CommonLoading loading={loading} />
    </CommonModal>
  );
};

export default AddTmallSupply;
